<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js'></script>
</head>
<body>
    <div id="app">
        <h1 id="hh">{{msg}}</h1>
    </div>
</body>
</html>



<script>

// 组件嵌套
// 组件初始化的时候
  //父子组件嵌套的时候:以beforeMount为分界点,父组件执行到beforeMount的时候,开始执行子组件
//   mounted执行完成之后,再执行父组件的mounted

//组件更新的时候,只会触发当前实例(组件)的更新函数beforeUpdate updated 
//卸载的时候:先执行父组件的beforeDest roy再执行子组件的beforeMount

//钩子函数要弄清楚的问题
//1.钩子函数地执行顺序
//2.哪里能操作dom
//3.哪里能发送请求
//4.哪里能操作数据
let vm = new Vue({
    el:"#app",
    data :{
        msg:'吃饭啦'
    },
    // 创建之前
    beforeCreate () {
    
        console.log('beforeCreate');
        // 输出事件数据
        console.log('this.$data'===this.$data);
        // 输出Vue根据模板创建出来的结构
        console.log('this.$el'===this.$el);
        console.log(document.getElementById('hh').innerText);
        console.group();
    },
    // 创建之后
    created () {
        //注入数据,并且对数据进行了劫持和响应,组件创建出来只会执行一次
        // 这里data methods computer 都可以使用
        // 不能操作dom
        this.msg='我的世界'
        console.log('created');
        // 输出事件数据
        console.log('this.$data'===this.$data);
        // 输出Vue根据模板创建出来的结构
        console.log('this.$el'===this.$el);
        console.log(document.getElementById('hh').innerText);
        console.group();
    },
    beforeMount () {
        //会根据模板的内容,在内存中创建虚拟dom 组件（实例）创建出来只会执行一次
        // 虚拟dom已经创建了，但是里面的指令和插值表达式还未被编译解析
        // 不能操作dom，因为虚拟domm还没有替换掉模板中的dom
         console.log('beforeMount');
        // 输出事件数据
        console.log('this.$data'===this.$data);
        // 输出Vue根据模板创建出来的结构
        console.log('this.$el'===this.$el);
        console.log(document.getElementById('hh').innerText);
        console.group();
    },
    mounted () {
        //会将创建出来并且编译好的虚拟dom,直接替换掉模板里面的结构
        // 可以操作dom，虚拟dom已经进行了编译，替换了原来模板中的dom
        // 可以发送异步请求
        console.log('mounted');
        // 输出事件数据
        console.log('this.$data'===this.$data);
        // 输出Vue根据模板创建出来的结构
        console.log('this.$el'===this.$el);
        console.log(document.getElementById('hh').innerText);
        console.group();
    },
    beforeUpdate () {
        //初始化事件,初始化生命周期,只要数据变更就会触发,可以触发多次
        console.log('beforeUpdate');
        // 输出事件数据
        console.log('this.$data'===this.$data);
        // 输出Vue根据模板创建出来的结构
        console.log('this.$el'===this.$el);
        console.log(document.getElementById('hh').innerText);
        console.group();
    },
    updated () {
        //数据更新之后触发,只要数据变更就会触发,可以触发多次
        console.log('updated');
        // 输出事件数据
        console.log('this.$data'===this.$data);
        // 输出Vue根据模板创建出来的结构
        console.log('this.$el'===this.$el);
        console.log(document.getElementById('hh').innerText);
        console.group();
    },

    // this.interval=setInterval(()=>{
    //         console.log('hcbhd');
    // }),
    // //只要数据变更就会触发,数据更新之前触发,可以触发多次
     // 销毁前
    beforeDestroy () {
       
        //什么情况下会触发组件的挂载卸载?
        //v-if切换组件显示的时候,会重新触发组件的生命周期钩子函数
        //动态组件
        //主动调用$beforeDestroy的
        clearInterval(this.interval)
        console.log('beforeDestroy');
        console.group();
    },
    //销毁后
    destroyed () {
        console.log('destroyed');
        console.group();
    },

    components: {
        Child:{
            template:{
                beforeCreate(){console.log('子组件的beforeCreate');},
                created(){console.log('子组件的Create');},
                beforeMount(){console.log('子组件的bbeforeMount');},
                mounted(){console.log('子组件的mounted');},
                beforeUpdate(){console.log('子组件的beforeUpdate');},
                updated(){console.log('子组件的updated');},
                beforeDestroy(){console.log('子组件的beforeDestroy');},
                destroyed(){console.log('子组件的destroyed');}
            }
        }
    }
}).$mount('#app')
</script>

    
